<template>
    <div>
        <nav-bar>
            <div slot="left" @click="backClick">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div slot="center" class="title">
                <div 
                    v-for="(item,index) in titles" 
                    :key="item" 
                    class="titleItem" 
                    :class="{active: currentIndex === index}" 
                    @click="titleClick(index)">
                    {{item}}
                </div>
            </div>
        </nav-bar>
    </div>
</template>

<script>
import NavBar from 'components/commom/navbar/NavBar';

export default {
    name: "DetailNavBar",
    data(){
        return{
            titles:['商品', '参数', '评论', '推荐'],
            currentIndex: 0
        }
    },
    components:{
        NavBar
    },
    methods:{
        titleClick(index){
            this.currentIndex = index
        },
        backClick(){
            this.$router.back()
        }
    }
}
</script>

<style scoped>
.el-icon-arrow-left{
    font-size: 20px;
    margin-top: 12px;
}
.title{
    display: flex;
}
.titleItem{
    flex: 1;
    font-size: 14px;
}
.active{
    color: lightcoral;
}
</style>